<template>
  <div class="dispatchBox">
    <div class="searchBox">
      <div class="box1">
        <!-- <a-checkbox @change="onChange1">范围</a-checkbox> -->
        <span style="padding-left:10px;">范围：</span>
        <a-select v-if="flag" placeholder="请选择" style="width:100px;" @change="selectChange">
          <a-select-option value="100">100m</a-select-option>
          <a-select-option value="200">200m</a-select-option>
          <a-select-option value="300">300m</a-select-option>
          <a-select-option value="400">400m</a-select-option>
          <a-select-option value="500">500m</a-select-option>
          <a-select-option value="">自定义</a-select-option>
        </a-select>
        <a-input v-else v-model="radius" placeholder="请输入" style="width:100px;" />
        <a-divider type="vertical" />
        <a-input-search v-model="locationValue" :placeholder="placeholder" enter-button @search="onSearch" />
      </div>
      <div class="box2"><a-checkbox @change="onChange2">坐标反查</a-checkbox></div>
    </div>
    <div class="listBox" v-if="positionShow">
      <div class="itemBox" v-for="(item, index) in positionList" :key="index" @click="onClickDetail(index)">
        <p class="p1">
          <span class="s1">
            <img src="@/views/xlgc/modules/img/marker_red2.png" /><span>{{ index + 1 }}</span>
          </span>
          <span class="s2">{{ item.title }}</span>
        </p>
        <p class="p2">{{ item.address }}</p>
        <span class="s3">></span>
      </div>
    </div>
    <Map
      ref="mapDrawId"
      :isToolShow="true"
      @getPoint="onGetPoint"
      @getAddress="onGetAddress"
      @pisitionList="onPisitionList"
    />
    <ListDrawer @clickRow="onClickRow" />
    <DetailDrawer ref="detailDrawerId" v-show="detailShow" />
  </div>
</template>

<script>
import ListDrawer from './components/listDrawer'
import DetailDrawer from './components/detailDrawer'
import Map from '@/views/xlgc/modules/map'
export default {
  components: {
    ListDrawer,
    DetailDrawer,
    Map
  },
  data() {
    return {
      radius: '',
      locationValue: '',
      flag: true,
      isChecked: false,
      placeholder: '搜地点、找监控、找物资',
      detailShow: false,
      positionShow: false,
      positionList: []
    }
  },
  mounted() {
    // 设置地图容器的高度，使地图完成铺满
    let siderHeight = document.getElementsByClassName('ant-layout-sider')[0].offsetHeight
    document.getElementsByClassName('dispatchBox')[0].style.height = siderHeight + 'px'
  },
  methods: {
    onChange1(e) {
      console.log(`checked = ${e.target.checked}`)
    },
    onChange2(e) {
      // console.log(`checked = ${e.target.checked}`)
      this.isChecked = e.target.checked
      if (this.isChecked) {
        this.placeholder = '请输入经纬度坐标'
      } else {
        this.placeholder = '搜地点、找监控、找物资'
      }
    },
    selectChange(value) {
      if (value == '') {
        this.flag = false
      }
      this.radius = value
    },
    onSearch() {
      if (this.locationValue.length <= 0) {
        if (this.isChecked) {
          this.$message.warning('请输入经纬度')
        } else {
          this.$message.warning('请输入地点')
        }
        return
      }
      if (this.isChecked) {
        let index = this.locationValue.indexOf(',')
        if (index < 0) {
          this.$message.warning('经纬度输入错误，用逗号隔开')
          return
        }
      }

      if (this.radius.length <= 0) {
        this.$message.warning('请选择范围')
        return
      }
      this.$refs.mapDrawId.clearAll()
      // 110.348873,20.065681 海口市人民医院
      // 110.210556,20.053398 海口市公安局

      // 输入经纬度，直接定位搜索
      if (this.isChecked) {
        this.detailShow = true
        this.positionShow = false
        let arr = this.locationValue.split(',')
        let params = {
          locationValue: this.locationValue,
          selectionVos: [
            {
              longitude: arr[0],
              latitude: arr[1],
              radius: this.radius
            }
          ]
        }
        this.$refs.detailDrawerId.getData(params)
        this.$refs.mapDrawId.searchByPoint(params)
      } else {
        // 模糊搜索信息列表
        this.$refs.mapDrawId.getPositionList(this.locationValue)
      }
    },
    // 输入模糊搜索信息列表
    onPisitionList(arr) {
      if (arr.length > 0) {
        this.positionShow = true
        this.detailShow = false
        this.positionList = arr
      } else {
        this.$message.warning('没有找到相关联的地址')
      }
    },
    // 点击位置列表进入详情
    onClickDetail(index) {
      this.detailShow = true
      this.positionShow = false
      console.log(this.positionList[index])
      let params = {
        locationValue: this.positionList[index].title,
        selectionVos: [
          {
            longitude: this.positionList[index].longitude,
            latitude: this.positionList[index].latitude,
            address: this.positionList[index].address,
            radius: this.radius
          }
        ]
      }
      this.$refs.detailDrawerId.getData(params)
      let arr = [
        [
          {
            key: 0,
            longitude: this.positionList[index].longitude,
            latitude: this.positionList[index].latitude,
            address: this.positionList[index].address
          }
        ]
      ]
      this.$refs.mapDrawId.setMapData(arr)
    },
    // 返回框选区域经纬度和半径
    onGetPoint(point) {
      this.detailShow = true
      this.positionShow = false
      // this.$refs.mapDrawId.clearAll()
      // console.log("point")
      // console.log(point)
      this.$refs.detailDrawerId.getData({ selectionVos: point }, true) // 参数true，区分框选查询
    },
    // 获取经纬度搜索返回的地理名
    onGetAddress(obj) {
      console.log(obj)
      this.$refs.detailDrawerId.locationValue = obj.surroundingPois[0].title
      this.$refs.detailDrawerId.address = obj.surroundingPois[0].address
    },
    onClickRow(row) {}
  }
}
</script>

<style lang="less" scoped>
.searchBox {
  position: absolute;
  left: 20px;
  top: 10px;
  z-index: 100;
  display: flex;
  .box1 {
    background-color: #fff;
    padding: 1px;
  }
  .box2 {
    background-color: #fff;
    margin-left: 6px;
  }
}
/deep/.ant-checkbox-wrapper {
  padding: 6px 0 0 4px;
}
.ant-input-group-wrapper {
  width: 308px;
  // margin-left: 10px;
}
.dispatchBox {
  position: relative;
  left: -10px;
  right: 0;
  top: -10px;
  bottom: 0;
  z-index: 10;
  height: 100vh;
  overflow: hidden;
  .listBox {
    position: absolute;
    top: 60px;
    right: 0;
    z-index: 10;
    height: 750px;
    width: 420px;
    padding: 10px 20px;
    background-color: #fff;
    color: #000;
    overflow-y: scroll;
    .itemBox {
      position: relative;
      border-bottom: 1px solid #ccc;
      padding: 10px 0;
      cursor: pointer;
      p {
        margin: 0;
      }
      .p1 {
        position: relative;
        .s1 {
          float: left;
          img {
            width: 20px;
            height: 28px;
            margin-right: 10px;
          }
          span {
            position: absolute;
            left: 3px;
            top: 2px;
            color: #fff;
            font-weight: normal;
            font-size: 13px;
            display: inline-block;
            width: 15px;
            text-align: center;
          }
        }
        .s2 {
          color: #3563d6;
          font-size: 16px;
          width: 86%;
          display: inline-block;
        }
      }
      .p2 {
        padding-left: 30px;
        padding-right: 25px;
        font-size: 14px;
      }
      .s3 {
        position: absolute;
        right: 0;
        top: 15px;
        font-size: 25px;
      }
    }
  }
  /deep/span.BMap_Marker {
    img {
      display: none !important;
    }
  }
  /deep/.ant-drawer-content-wrapper {
    height: 100% !important;
    top: 60px !important;
  }
  .breadcrumb-box {
    position: absolute;
    right: 20px;
    top: 7px;
    z-index: 10000;
  }
}
.map {
  .dispatchBox;
  top: 0;
  transition: all 0.3s;
  &.offset-x-30 {
    left: 30%;
  }
}
.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100px);
  border-radius: 10px;
  width: 200px;
  line-height: 100px;
  text-align: center;
  font-size: 24px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  i {
    margin-right: 12px;
  }
}
.handle {
  position: absolute;
  display: inline-block;
  top: 60px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  cursor: pointer;
  transition: 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .close-icon {
    font-size: 20px;
    color: #fff;
  }
  &.leftHandle {
    left: 0;
  }
  &.rightHandle {
    right: 0;
  }
}
</style>
